<template>
  <div class="container">
    <div class="banner">
      <img src="../../../static/images/newsBanner.jpg" class="img-res">
    </div>
    <article class="ExhibitionList">
      <h2>CTHE EXHIBITION IN PROGRESS</h2>
      <el-row :gutter="20">
        <el-col :span="12" v-for="(item,index) in exhibitionList" :key="index">
          <router-link :to="'/ExNews/' + (item.id)">
            <div class="grid-content">
              <img :src="changeImgpath(item.litpic)" class="img-res">
              <p>{{ item.title }}</p>
            </div>
          </router-link>

        </el-col>
      </el-row>
      <div class="page">
        <el-pagination
        background
        layout="prev, pager, next"
        :pager-count=pager
        @current-change="handleCurrentChange"
        :total="total">
        </el-pagination>
      </div>
    </article>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      exhibitionList: {},
      total: null,
      pager: 5
    }
  },
  mounted () {
    axios.get('/news/list/exhibitions').then(response => {
      this.exhibitionList = response.data.data.data
      this.total = response.data.data.count
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods: {
    handleCurrentChange (val) {
      axios.get('/news/list/exhibitions?page=' + val).then(response => {
        this.exhibitionList = response.data.data.data
      }).catch(function (error) {
        console.log(error)
      })
    },
    changeImgpath (img) {
      img = '//www.kefid.com' + img
      return img
    }
  }
}
</script>
<style scoped>
.container{
  padding: 52px 0 0px 0;
}
.ExhibitionList{
  padding: 0 1rem;
}
.ExhibitionList h2{
  border-left: 0.2rem solid #db3f28;
  font-size: 1.4rem;
  padding: 0.8rem 1rem;
}
.ExhibitionList .el-col-12 p{
  text-align: left;
}
.ExhibitionList a{
  color: #444
}
.ExhibitionList .el-col-12{
  float: none;
  font-size: 1.2rem;
  vertical-align: top;
  display: inline-block;
}
.ExhibitionList .el-row{
  font-size: 0;
}
.page{
  text-align: center;
  margin: 1rem 0;
}

</style>
